import React, { useEffect, useRef } from 'react';
import Overflow from 'rc-overflow';
// import '../assets/index.less';
// import './common.less';
import './index.less';

interface ItemType {
    value: string | number;
    label: string;
}

function createData(count: number): ItemType[] {
    // const data: ItemType[] = new Array(count)
    //     .fill(undefined)
    //     .map((_, index) => ({
    //         value: index,
    //         label: `Label ${index}`,
    //     }));

    // return data;
    return [
        {
            value: 1,
            label: `Label ${0} xixixixi`,
        },
        {
            value: 2,
            label: `Label ${0}`,
        },
        {
            value: 3,
            label: `Label ${0} xixixixixxxxxxxxxxxxxixixixixixix`,
        },
        // {
        //     value: 3,
        //     label: `Label`,
        // },
        // {
        //     value: 4,
        //     label: `Label ${0} xixixixi`,
        // },
        // {
        //     value: 5,
        //     label: `Label ${0}`,
        // },
        // {
        //     value: 6,
        //     label: `Label ${0} xixixixi`,
        // },
        // {
        //     value: 7,
        //     label: `Label ${0}`,
        // },
    ];
}

function renderRawItem(item: ItemType) {
    return (
        <Overflow.Item component="span">
            <div
                style={{
                    margin: '0 30px 0 0px',
                    padding: '4px 8px',
                    background: 'rgba(255, 0, 0, 0.2)',
                }}
            >
                {item.label}
            </div>
        </Overflow.Item>
    );
}

const Demo = () => {
    const [responsive, setResponsive] = React.useState(true);
    const [data, setData] = React.useState(createData(1));
    const o = useRef();

    const restRef = useRef();
    function renderRest(items: ItemType[]) {
        return (
            <div
                style={{
                    margin: '0 16px 0 8px',
                    padding: '4px 8px',
                    background: 'rgba(255, 0, 0, 0.2)',
                }}
            >
                +{items.length}...
            </div>
        );
    }
    function onVisibleChange(visibleCount: number) {
        console.log('!!!!', visibleCount);
    }
    return (
        <div style={{ padding: 32 }}>
            <div
                style={{
                    border: '5px solid green',
                    padding: 8,
                    width: '50%',
                    // maxWidth: 300,
                    marginTop: 32,
                }}
            >
                <Overflow<ItemType>
                    onVisibleChange={onVisibleChange}
                    data={data}
                    renderRawItem={renderRawItem}
                    renderRest={renderRest}
                    maxCount={responsive ? 'responsive' : 6}
                />
            </div>
        </div>
    );
};

export default Demo;
